各个属性的细分

上一节我们讲到了一个简单的典型的案例，现在来讲讲每个属性的详细解释

相机Camera

1. OrthographicCamera: 这一摄像机使用orthographic projection（正交投影）来进行投影。在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。
2. CubeCamera: 立方相机创建6个渲染到WebGLCubeRenderTarget的摄像机。
3. PerspectiveCamera: 这一摄像机使用perspective projection（透视投影）来进行投影。这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
4. StereoCamera: 双透视摄像机（立体相机）常被用于创建3D Anaglyph（3D立体影像） 或者Parallax Barrier（视差屏障）。

光源

1. AmbientLight: 环境光，可以均匀的照亮场景中的所有物体
2. DirectionalLight: 平行光，是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。
3. HemisphereLight: 半球光，光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色
4. LightProbe: 光照探针，是一种在3D场景中添加光源的另一种方法。与经典光源（平行光、点光、聚光）不同， 光照探针不发光。相反，光照探针存储着有关穿过3D空间的光线的信息。 渲染过程中，通过使用来自光照探针的数据，来逼近打到3D物体上的光线。
5. PointLight: 点光源，从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
6. RectAreaLight: 平面光光源,从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
7. SpotLight: 聚光灯，光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。
   

材质

1. LineBasicMaterial: 基础线条材质,一种用于绘制线框样式几何体的材质。
2. LineDashedMaterial: 虚线材质,一种用于绘制虚线样式几何体的材质。
3. MeshBasicMaterial: 基础网格材质,一个以简单着色（平面或线框）方式来绘制几何体的材质。这种材质不受光照的影响。
4. MeshDepthMaterial: 深度网格材质,一种按深度绘制几何体的材质。深度基于相机远近平面。白色最近，黑色最远
5. MeshDistanceMaterial: 在内部用于使用PointLight来实现阴影映射
6. MeshLambertMaterial: Lambert网格材质,一种非光泽表面的材质，没有镜面高光。
7. MeshMatcapMaterial: 由一个材质捕捉（MatCap，或光照球（Lit Sphere））纹理所定义，其编码了材质的颜色与明暗。
8. MeshNormalMaterial: 法线网格材质,一种把法向量映射到RGB颜色的材质。
9. MeshPhongMaterial: Phong网格材质,一种用于具有镜面高光的光泽表面的材质。
10. MeshStandardMaterial: 一种基于物理的标准材质，使用Metallic-Roughness工作流程。
11. MeshPhysicalMaterial: 物理网格材质MeshStandardMaterial的扩展，提供了更高级的基于物理的渲染属性：
12. PointsMaterial: 点材质。
13. ShaderMaterial: 着色器材质,使用自定义shader渲染的材质。 shader是一个用GLSL编写的小程序 ，在GPU上运行。 您可能需要使用自定义shader。
14. 其他: 还有一些其他材质，但使用不多，有兴趣的可以在three.js官网查看

使用

一般在构建动画中使用的素材动画工程师提供的模型来进行渲染，然后控制模型进行一些操作

// 场景、光照、材质、模型、渲染器、控制器、相机
  if (!Detector.webgl) Detector.addGetWebGLMessage();
  var container, stats, controls;
  var camera, scene, renderer, light;

  init();
  animate();
  function colorChange(event) {
    console.log(event.target.value);
    light.color.set(event.target.value);
  }
  function init() {
    // 创建容器
    container = document.createElement('div');
    document.body.appendChild(container);

    // 生成相机
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(-1.8, 0.9, 2.7);

    // 控制器
    controls = new THREE.OrbitControls(camera);
    // 设置控制器目标位置
    controls.target.set(0, -0.2, -0.2);
    controls.update();

    // 切片路径
    var path = '../three.js-master/examples/textures/cube/Bridge2/';
    var suffix = '.jpg';
    // 加载场景图片
    var envMap = new THREE.CubeTextureLoader().load([
      path + 'posx' + suffix, path + 'negx' + suffix,
      path + 'posy' + suffix, path + 'negy' + suffix,
      path + 'posz' + suffix, path + 'negz' + suffix
    ]);
    // 创建场景
    scene = new THREE.Scene();
    scene.background = envMap;

    // 光照
    // A light source positioned directly above the scene, with color fading from the sky color to the ground color.
    light = new THREE.HemisphereLight(0xbbbbff, 0x111122);
    light = new THREE.AmbientLight(0x111122);
    light = new THREE.DirectionalLight(0x111122, 1);
    light.position.set(0, 1, 0);
    scene.add(light);

    // 创建模型
    var loader = new THREE.GLTFLoader();
    loader.load('../three.js-master/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function (gltf) {
      gltf.scene.traverse(function (child) {
        if (child.isMesh) {
          child.material.envMap = envMap;
          // child.material.needsUpdate = true;
        }
      });
      scene.add(gltf.scene);
    });
    // The WebGL renderer displays your beautifully crafted scenes using WebGL.
    // 渲染器
    render = new THREE.WebGLRenderer({
      antialias: true
    });
    render.setPixelRatio(window.devicePixelRatio);
    render.setSize(window.innerWidth, window.innerHeight);
    render.gammaOutput = true;
    container.appendChild(render.domElement);

    stats = new Stats();
    container.appendChild(stats.dom);
  }
  function animate() {
    requestAnimationFrame(animate);
    render.render(scene, camera);
    stats.update();
  }

var scene, camera, controls, stats;
  var renderer, mixer;
  var clock = new THREE.Clock();
  var url = '../three.js-master/examples/models/json/scene-animation.json';
  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  var container = document.getElementById('container');
  var stats = new Stats();
  container.appendChild(stats.dom);
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  container.appendChild(renderer.domElement);
  // 使用加载器加载文件
  new THREE.ObjectLoader().load(url, function (loadedScene) {
    scene = loadedScene;
    scene.background = new THREE.Color(0xffffff);
    scene.traverse(function (sceneChild) {
      if (sceneChild.type === 'PerspectiveCamera') {
        camera = sceneChild;
        camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.updateProjectionMatrix();
      }
    });
    if (camera === undefined) {
      camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
      camera.position.set(-200, 0, 200);
    }
    controls = new THREE.OrbitControls(camera);

    var geometry = new THREE.PlaneBufferGeometry(20000, 20000);
    var material = new THREE.MeshPhongMaterial({ shininess: 0.1 });
    var ground = new THREE.Mesh(geometry, material);
    ground.position.set(0, -250, 0);
    ground.rotation.x = - Math.PI / 2;
    scene.add(ground);
    // 雾？
    scene.fog = new THREE.Fog(0x00ffff, 1000, 10000);
    var animationClip = scene.animations[0];
    mixer = new THREE.AnimationMixer(scene);
    mixer.clipAction(animationClip).play();
    animate();
  });
  function animate() {
    requestAnimationFrame(animate);
    render();
  }
  // 渲染
  function render() {
    // 获取时间
    var delta = 0.75 * clock.getDelta();
    mixer.update(delta);
    stats.update();
    renderer.render(scene, camera);
  }

介绍

什么是Three.js

The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.
是一个易于使用，轻量级，跨浏览器，通用的3D库。当前的构建仅包含WebGL渲染器，但示例中还提供了WebGPU（实验性），SVG和CSS3D渲染器。

可以做什么

可以各种3d数据展示（图扑软件）
可以做游戏 （hexgl-bkcore）

怎么用

至于怎么用就是一个复杂的问题，首先认识一下Three.js动画的基本构成

1. 场景 scene

   new THREE.Scene()
   Scenes allow you to set up what and where is to be rendered by three.js. This is where you place objects, lights and cameras.(场景允许您设置由 three.js 渲染的内容和位置。这是您放置物体、灯光和相机的地方。)
   场景是包含动画里所有的内容，是必不可少的部分

2. 相机 camera

   相机是用来观看场景的，相机的所看到的即所渲染出来，而相机种类又有多种

3. 光源

   不同的光的照射渲染结果也不同，如点光源，自然光，平行光等

4. 材质

   材质是一个物体的性状，不同的场景使用不同的材质，如使用高光材质可以反射光源，形成镜面效果

5. 模型

   在制作动画过程中，大多通过加载器来加载由3d软件制作而成的gltf模型文件，也有简单的可以通过内置的一些几何体来实现

6. 控制器

   通过控制器用户可以选转拖动操作模型，增强体验

以上六点就是动画的基本点，而每个点又对应有多个功能，这个放后面再讲

简单的例子

```javascript
// 生成场景
var scene = new THREE.Scene();
// 创建网格模型
// var geometry = new THREE.SphereGeometry(60, 40, 50);
var geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方体几何对象
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); // 一种非光泽表面的材质，没有镜面高光。
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 光源设置
var point = new THREE.PointLight(0xaaffaa);
point.position.set(400, 200, 300);
scene.add(point);
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// 相机设置
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
function render(e) {
    console.log(e);
    // mesh.rotateY(0.01);
    renderer.render(scene, camera);
    // requestAnimationFrame(render)
}
// setInterval(render, 20)
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
```

结果